<template>
	<view>
		<!-- preview='true' -->
		<!-- 轮播图 -->
		<swiper-image :swipers='banners' height='750' preview></swiper-image>

		<Card headTitle='小米MIX3 6GB+128GB'>
			<!-- <view>磁动力滑盖全面屏 / 前后旗舰AI双摄 / 四曲面彩色陶瓷机身 / 高效10W无线充电</view> -->
			<view>{{detail.title}}</view>
		</Card>
		<!-- 1999 -->
		<price  >{{showPrice}}</price>

		<!-- 商品属性 -->


		<!-- 滚动商品特性 w170*h110 -->
		<scroll-attrs :baseAttrs='baseAttrs'></scroll-attrs>
		<view class="p-2">


			<view class="rounded border bg-light-secondary">
				<uni-list-item @click="show('attr')">
					<view>
						<text>已选</text>
						<text title='火焰红64G'>{{checkedSkus}}</text>
					</view>
				</uni-list-item>

				<uni-list-item @click="show('express')">
					<view>
						<text>配送</text>
						<text>北京 东城区</text>
						<text class="main-text-color">现配</text>
					</view>
				</uni-list-item>
				<uni-list-item extraWidth="0%" @click="show('service')">
					<view class="d-flex">
						<view class="flex-1">
							<text class="iconfont icon-finish main-text-color"></text>
							<text class="font-sm">小米自营</text>
						</view>
						<view class="flex-1  mx-1">
							<text class="iconfont icon-finish main-text-color"></text>
							<text class="font-sm">小米发货</text>
						</view>

						<view class="flex-2">
							<text class="iconfont icon-finish main-text-color"></text>
							<text class="font-sm">七天无理由退货</text>
						</view>
					</view>
				</uni-list-item>

			</view>

		</view>
		<!-- 商品选购结束 -->

		<!-- 横向滚动评论  外层 w620*h380   头像 w70*h70  	图片 h115  -->
		<scroll-comments :comments="comments"></scroll-comments>


		<!-- 富文本解析 -->
		<!-- 商品详情 -->
		<!-- https://www.npmjs.com/package/gaoyia-parse -->
		<view class="py-4">
			<u-parse className="uparse" :content="context" @preview="preview" @navigate="navigate"></u-parse>
		</view>




		<Card headTitle='热门推荐'>

		</Card>
		<!-- 商品列表展示 -->

		<common-list :commonList='commonList'></common-list>






		<!-- 底部操作条   @show="show('attr')" -->
		<bottom-btn></bottom-btn>


		<!--  商品选择属性 -->
		<common-popup :popupClass='popup.attr' @hide="myhide('attr')">

			<!--  上半部分 -->
			<view class="d-flex a-center" style="height: 275rpx;">
				<image src="../../static/images/demo/list/1.jpg" mode="widthFix" style="height: 180rpx;width: 180rpx;" class="border rounded"></image>
				<view class="pl-2">
					<price priceSize="font-lg" unitSize="font">2335  ---{{showPrice}}</price>
					<text class="d-block"  title='火焰红 64GB 标配-----'>
						
						
						{{checkedSkus}}
					</text>
				</view>

			</view>

			<!-- 第二部分 -->
			<scroll-view scroll-y class="w-100" style="height: 660rpx;">
				<card :headTitle="item.title" v-for='(item,index) in selects' :key='index'>
					<!-- 单选按钮组 -->
					<!-- @change='changeRadio1'  @change='changeRadio2' -->
					<zcm-radio-group :label="item" :selected.sync='item.selected'></zcm-radio-group>
				</card>

				<view class="d-flex j-sb a-center p-2 border-top">
					<text>购买数量</text>
					<!-- detail.num = $event -->
					<uni-number-box :min="1" :value="detail.num" @change="detail.num = $event"></uni-number-box>
				</view>
			</scroll-view>


			<!-- @click="myhide('attr')" -->
			<view class="main-bg-color text-white font-md d-flex a-center j-center" hover-class="main-bg-hover-color" style="height: 100rpx;margin-left: -30rpx;margin-right: -30rpx;"
			 @tap.stop="addCart">


				<!-- @tap.stop="addCart" -->
				<!-- 处理真实加入购物车 -->

				加入购物车
			</view>



		</common-popup>



		<!-- 收货地址 -->

		<common-popup :popupClass="popup.express" @hide="myhide('express')">
			<view class="d-flex a-center j-center font-md border-bottom border-light-secondary" style="height: 100rpx;">
				收货地址
			</view>
			<scroll-view scroll-y class="w-100" style="height: 835rpx;">
					<uni-list-item  v-for="(item,index) in pathList"  :key='index' >
					<view class="iconfont icon-dingwei font-weight font-md">{{item.name}}</view>
					<view class="font text-light-muted">
						{{item.path}}  {{item.detailPath}}
					</view>
				</uni-list-item> 
				<!-- <uni-list-item>
					<view class="font text-light-muted">
						武汉光谷 洗脚城
					</view>
				</uni-list-item> -->
			</scroll-view>





			<!-- @tap.stop="hide('express') -->
			<!-- 点击跳转到新增收货地址列表   @tap.stop="openCreatePath" -->
			<view class="main-bg-color text-white font-md d-flex a-center j-center" hover-class="main-bg-hover-color" style="height: 100rpx;margin-left: -30rpx;margin-right: -30rpx;">
				选择新的地址
			</view>
		</common-popup>


		<!-- 服务说明 -->
		<!-- 7天无理由退货 -->

		<common-popup :popupClass="popup.service" @hide="myhide('service')">
			<view class="d-flex a-center j-center font-md border-bottom border-light-secondary" style="height: 100rpx;">
				服务说明
			</view>
			<scroll-view scroll-y class="w-100" style="height: 835rpx;">
				<view class="py-1">
					<view class="d-flex a-center">
						<view class="iconfont icon-finish main-text-color mr-1"></view>
						小米自营
					</view>
					<text class="text-light-muted font pl-4">
						不管满多少，就是不包邮
					</text>
				</view>
			</scroll-view>
			<!-- @tap.stop="myhide('service')" -->
			<view class="main-bg-color text-white font-md d-flex a-center j-center" hover-class="main-bg-hover-color" style="height: 100rpx;margin-left: -30rpx;margin-right: -30rpx;">
				确定
			</view>
		</common-popup>










	</view>
</template>

<script>
	var htmlString =
		`
		<p>
			<img src="https://i8.mifile.cn/v1/a1/9c3e29dc-151f-75cb-b0a5-c423a5d13926.webp">
			<img src="https://i8.mifile.cn/v1/a1/f442b971-379f-5030-68aa-3b0accb8c2b9.webp">
			<img src="https://i8.mifile.cn/v1/a1/63b700b6-643e-ec18-fdf3-da66b4b4173f.webp">
			<img src="https://i8.mifile.cn/v1/a1/e9dbf276-193e-11c4-99a6-3097fde82350.webp">
			<img src="https://i8.mifile.cn/v1/a1/1249d3ee-2990-a2b4-28d9-f719c2417b1f.webp">
			<img src="https://i8.mifile.cn/v1/a1/97c79915-64b2-808c-53b4-4345652a179f.webp">
			<img src="https://i8.mifile.cn/v1/a1/cd0fbe1e-a1b3-a87a-f4a6-6fb08ec54931.webp">
		</p>	`



	import swiperImage from "@/components/index/swiper-image.vue";
	import Card from '@/components/common/card.vue'

	import price from '@/components/common/price.vue'

	import scrollAttrs from "@/components/detail/scroll-attrs.vue"

	import uniListItem from '@/components/uni-ui/uni-list-item/uni-list-item.vue'
	import scrollComments from "@/components/detail/scroll-comments.vue"




	import bottomBtn from "@/components/detail/bottom-btn.vue"
	import uParse from "@/components/uni-ui/uParse/src/wxParse.vue"


	import commonList from "@/components/common/common-list.vue";
	import commonPopup from "@/components/common/common-popup.vue"

	import zcmRadioGroup from "@/components/common/radio-group.vue"

	import uniNumberBox from "@/components/uni-ui/uni-number-box/uni-number-box.vue"


	import {
		mapMutations,
		mapState
	} from 'vuex'

	export default {


		components: {


			swiperImage,
			Card,
			price,
			scrollAttrs,
			uniListItem,
			scrollComments,
			bottomBtn,
			uParse,
			commonList,
			commonPopup,
			zcmRadioGroup,
			uniNumberBox
		},
		data() {
			return {

				// popupClass:'none',
				// aaa:{
				// 	pops:'none',
				// 	express:'none'
				// },


				popup: {
					attr: "none",
					express: "none",
					service: "none"
				},

				popupClass: "none",

				detail: {
					// id: 20,
					// title: "小米MIX3 6GB+128GB",
					// desc: "磁动力滑盖全面屏 / 前后旗舰AI双摄 / 四曲面彩色陶瓷机身 / 高效10W无线充电",
					// cover: "/static/images/demo/list/1.jpg",
					// pprice: 3299,
					// num: 1,
					// max: 100
				},
				selects: [
					
					{
						title: "颜色",
						selected: 0,
						list: [{
								name: "黄色"
							},
							{
								name: "黑色"
							},
							{
								name: "红色"
							},
						]
					},
					
				],

				context: htmlString,


				banners: [
					// {
					// 	src: 'https://i8.mifile.cn/v1/a1/6d13e060-d5c5-e610-88d0-80816fa2b0ce.webp'
					// },
					// {
					// 	src: 'https://i8.mifile.cn/v1/a1/aff0b715-e63a-68f3-91b0-46a22543555e.webp'
					// }
				],

				baseAttrs: [
					
					// {
					// 	icon: "icon-cpu",
					// 	title: "CPU",
					// 	desc: "蛟龙845八核"
					// },
					
				],
				comments: [
					
					// {
					// 	userpic: "/static/images/demo/demo6.jpg",
					// 	username: "楚绵",
					// 	create_time: "2019-07-31",
					// 	goods_num: 123,
					// 	context: "评论内容",
					// 	imglist: [
					// 		"/static/images/demo/demo6.jpg",
					// 		"/static/images/demo/demo6.jpg",
					// 		"/static/images/demo/demo6.jpg"
					// 	]
					// },
					
				],
				commonList: [
					{
						cover: "/static/images/demo/list/1.jpg",
						title: "米家空调",
						desc: "1.5匹变频",
						oprice: 2699,
						pprice: 1399
					},
					
				]
			}
		},
		methods: {

			preview(src, e) {
				// do something
			},
			navigate(href, e) {
				// do something
			},
			// myChange(e) {
			// 	console.log(e)
			// 	this.detail.num=e
			// }
			//显示方法
			// show(key) {
			// 	for(var k in this.popup) {
			// 		this.popup[k]='show'
			// 	}
			// },
			show(key) {
				this.popup[key] = 'show'
			},

			//隐藏方法 

			myhide(key) {
				// key='attr'
				console.log(key)
				this.popup[key] = 'hide';

				setTimeout(() => {
					this.popup[key] = 'none';
				}, 1000)
			},


			...mapMutations(['addGoodsToCart']),

			addCart() {

				//重新组织当前商品详情数据
				let goods = this.detail;

				goods['checked'] = false
				goods['attrs'] = this.selects;

				console.log(goods)




				//把当前数据追加到vuex里面去
				this.addGoodsToCart(goods)
				// 隐藏我们的属性框
				this.myhide('attr')

			},

//初始化发送请求的方法
			__initDetailData(id) {
				this.$api.get({
					url: '/goods/' + id
				}).then(res => {
					
					
					console.log(res.data)
					let  detaiData=res.data;
			  detaiData.goodsBanner.forEach(v=>{
					console.log(v.url)
				    //轮播图	
					 this.banners.push({src:v.url}) 
						
					})
					
			       //构建detail数据 
				   
				   this.detail=detaiData;
				   this.detail.num=1;
				   
				   //  蛟龙八核商品属性 
				   // baseAttrs: [{
				   // 		icon: "icon-cpu",
				   // 		title: "CPU",
				   // 		desc: "蛟龙845八核"
				   // 	},
				   	
				   // ],
				this. baseAttrs= detaiData. goodsAttrs.map((v,index)=>{
					   return {
						   icon:'icon-cpu',
						   title:v.name+(index+1),
						   desc:v.value
					   } 
				  })
				  
				  //商品热门评论 
				  
				  // goods_num: 0
				  // id: 162
				  // rating: 4
				  // review: Object
				  // review_time: "2019-09-01 20:34:27"
				  // user: Object
				  // user_id: 3
				this.comments= detaiData. hotComments.map(v=>{
				
					
					 
					 return  { 
						id: v.id,
					 	userpic : v.user.avatar,
					 	username: v.user.nickname,
					 	create_time: v.review_time,
					 	goods_num: v.goods_num,
					 	context: v.review.data,
					 	imglist: v.review.image
					 }
					 
					 
					 
					 
				 }),
				 //商品图片展示
				 this.context=detaiData.content
				 //热门推荐 
				 // commonList: [
				 // 	{
				 // 		cover: "/static/images/demo/list/1.jpg",
				 // 		title: "米家空调",
				 // 		desc: "1.5匹变频",
				 // 		oprice: 2699,
				 // 		pprice: 1399
				 // 	},
				 	
				 // ]
				 // cover: "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/public/5984928facd569ef906becba3469810b.png"
				 // desc: "酒店格调，简约品味/双雕方空，繁艺简呈/新疆纯棉，百支醇密"
				 // id: 25
				 // min_oprice: (...)
				 // min_price: (...)
				 // title: (...)

			this.commonList=detaiData. hotList.map(v=>{
					return {
						id:v.id,
				 		cover: v.cover,
				 		title: v.title,
				 		desc: v.desc,
				 		oprice: v.min_oprice,
				 		pprice: v.min_price
				 	}
				});
				//组装 selects
				// selects: [
					
				// 	{
				// 		title: "颜色",
				// 		selected: 0,
				// 		list: [{
				// 				name: "黄色"
				// 			},
				// 			{
				// 				name: "黑色"
				// 			},
				// 			{
				// 				name: "红色"
				// 			},
				// 		]
				// 	},
					
				// ],
				// goodsSkusCard
				// goodsSkusCardValue
				
				  if(this.detail.sku_type==1) {
					this.selects=  detaiData.goodsSkusCard.map(v=>{
						  let list=[];
						 list= v.goodsSkusCardValue.map(v2=>{
							     return {
									 name:v2.value,
									 id:v2.id
								 }
						  })   
						  
						  return {
							  title: v.name,
							  selected: 0,
							  list:list
						  }
					  })
					  console.log(this.selects)
					  // 商品规则（价格匹配）
					  // goodsSkus
					  detaiData.goodsSkus.map(item=>{
						  let arr=[];
						  
						 for(var key in item.skus) {
							  arr.push  ( item.skus[key].value)
						 }
						 console.log(arr) 
						 item.statusText=arr.join(',')
					  })
					  // console.log(detaiData.goodsSkus)
					  
					  
					  
					  
					  
				  }
				 
					
				})
			},

		},
		
		
		// selects: [
			
		// 	{
		// 		title: "颜色",
		// 		selected: 0,
		// 		list: [{
		// 				name: "黄色"
		// 			},
		// 			{
		// 				name: "黑色"
		// 			},
		// 			{
		// 				name: "红色"
		// 			},
		// 		]
		// 	},	
		//	{
			// 		title: "套餐",
			// 		selected: 0,
			// 		list: [{
			// 				name: "标配"
			// 			},
			// 			{
			// 				name: "套餐一"
			// 			},
			// 			{
			// 				name: "套餐二"
			// 			},
			// 		]
			// 	},		
		// ],
		
		computed:{
			...mapState({
				pathList:state=>state.path.list
			}),
			
			
			//商品规格匹配
			 checkedSkus() {
			let arr= this.selects.map(v=>{
			       return  v.list[v.selected].name
			// arr=['黄色','标配']
			})	
			console.log(arr)
			return  arr.join(',')
			
			
			
		},
		
		checkedSkusIndex(){
			
			if(!(Array.isArray(this.detail.goodsSkus))) {
				return -1
			}
			// this.checkedSkus==='黄色标配'
		let index=	this.detail.goodsSkus.findIndex(v=>{
				return  v.statusText===this.checkedSkus
			})
			
			console.log(index)
			return index
			
			
			
			
		},
		showPrice(){
			//代码严谨 
			if(this.checkedSkusIndex<0) {
				return    this.detail.min_price || 0.00 
			}
			   return this.detail.goodsSkus[this.checkedSkusIndex].pprice
			
			
			
		}
		
		},
		
		

		onLoad(e) {
			console.log(e)
			let id = e.id;
			console.log(typeof id)
			this.__initDetailData(id)

		},


		// onReady(e) {
		// 	console.log(e)
		// let id=e.detail.id;
		// 	console.log(id)
		// }

	}
</script>

<style>
	.uparse .p {
		padding: 0 !important;
	}

	.uparse view,
	.uparse uni-view {
		line-height: 0 !important;
	}
</style>
